<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>合盘结果</title>
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport">
    <script src="{$oss}/active/newyear/js/rem.js"></script>
    <link rel="stylesheet" href="/static/synastry_multiple/css/common.css?v=1">
    <link rel="stylesheet" href="/static/synastry_multiple/js/common.js?v=1">
    <link rel="stylesheet" href="/static/synastry_multiple/css/get_with_score.css">
    <link rel="stylesheet" href="/static/synastry_multiple/css/synastry-{$result.synastry_type}.css">
</head>
<body>
<div class="content-box box">
    <div class="top-box">
        <div class="left-box avatar-box">
            <img onerror="onerror=null;src='{$oss}/avatar_default_2.png'" src="{$result.avatar1}"
                 class="left-img"
                 alt="">
            <p class="name">{$result.nickname1}</p>
        </div>
        <div class="with-icon"></div>
        <div class="right-box avatar-box">
            <img onerror="onerror=null;src='{$oss}/avatar_default_2.png'" src="{$result.avatar2}" alt=""
                 class="right-img">
            <p class="name">{$result.nickname2}</p>
        </div>
        <div class="result-score">
            <div class="title1"><p class="icon left"></p>{$page_data.title1}<p class="icon right"></p></div>
            <div class="with-score">{$total_score}</div>
            <div class="left1-box text-b">
                <p class="p1">{$data.harmoniousAndConflict[0]}%</p>
                <p class="p2">和谐</p>
            </div>
            <div class="progess-box">
                <div class="progess-left icon-af"></div>
                <div class="progess-right"></div>
            </div>
            <div class="right1-box text-b">
                <p class="p1">{$data.harmoniousAndConflict[1]}%</p>
                <p class="p2">冲突</p>
            </div>
            <div class="tips">{$tips}</div>
        </div>
    </div>
    <div class="content-box">
        <div class="item">
            <div class="item-title">关系总结</div>
            <div class="item-value">{$data.if_love}</div>
        </div>
        <span class="hr"></span>
        {if $result.synastry_type == 7}
        <div class="item">
            <div class="item-title1 gx gx1">{$page_data.title2}</div>
            {foreach name="$data.relation" item="v"}
            <div class="item-option">
                <div class="name">{$v.name_cn}</div>
                <div class="progess-box">
                    <div class="progess-index" style="width:{$v.per*100}%"></div>
                </div>
                <div class="val">{:intval($v.per*100)}%</div>
            </div>
            {/foreach}
        </div>
        <span class="hr"></span>
        {else/}
        <div class="item">
            <div class="item-title1 gx gx1">{$page_data.title2}</div>
            <div class="item-option">
                <div class="circle">
                    <canvas id="circle-canvas"></canvas>
                </div>
                <div class="summary">
                    {foreach name="$data.summary_comparison.list" key="k" item="v"}
                    <div class="summary-item">
                        <div class="name name{$k+1}">{$v.nickname}</div>
                        <div class="score">{:intval($v.score)}%</div>
                        <div class="content">{$v.content}</div>
                    </div>
                    {/foreach}
                </div>
            </div>
        </div>
        <span class="hr"></span>
        {/if}
        <div class="item">
            <div class="item-title1 gx gx2">{$page_data.title3}</div>
            <div class="tips-box">更多合盘结果在准了APP中免费查看</div>
        </div>
        <span class="hr"></span>
        <div class="item">
            <div class="item-title1 gx gx3">{$page_data.title4}</div>
            <div class="tips-box">更多合盘结果在准了APP中免费查看</div>
        </div>
        <span class="hr"></span>
        <div class="item">
            <div class="item-title1 gx gx4">{$page_data.title5}</div>
            <div class="tips-box">更多合盘结果在准了APP中免费查看</div>
        </div>
        <span class="hr mt20 mb10"></span>
        <div class="item">
            {if $result.synastry_type == 7}
            <div class="item-title1 gx gx5">双方在关系中的收获</div>
            {else/}
            <div class="item-title1 gx gx5">{$page_data.title6}</div>
            {/if}
            <div class="tips-box">更多合盘结果在准了APP中免费查看</div>
        </div>

        <div class="padding-bottom60"></div>

        <div class="global-location">
            <img src="https://oss.goddessxzns.com/picture/uploads/logo.png?x-oss-process=style/show" alt="logo" class="logo">
            <div class="title">准了APP</div>
            <div class="desc">前往“准了APP”查看更多星座知识</div>
            <a href="https://applink-zhunle.goddessxzns.com?app=zhunle&target=local&link=composite%3Fneed_auth%3D1" class="location">
                <span class="loc-btn" id="openApp">打开APP</span>
                <span class="close"></span>
            </a>
        </div>

    </div>
</div>
</body>
<script src="{$oss}active/seven/js/jquery-v2.1.1.min.js"></script>
<script>
    $('.global-location .close').click(function () {
        $(this).parent().parent().hide();
        return false;
    })

    var cnzz_s_tag = document.createElement('script');
    cnzz_s_tag.type = 'text/javascript';
    cnzz_s_tag.async = true;
    cnzz_s_tag.charset = 'utf-8';
    cnzz_s_tag.src = 'https://w.cnzz.com/c.php?id=1279195343&async=1';
    var root_s = document.getElementsByTagName('script')[0];
    root_s.parentNode.insertBefore(cnzz_s_tag, root_s);

    let lineWidth = 25; // 线条宽度
    var width = document.documentElement.getBoundingClientRect().width;// 获取当前文档元素的宽度
    if (width > 750) {
        width = 750;
    }

    /**
     * 绘制单个进度条的函数
     * @param {Object} ctx - Canvas绘图上下文
     * @param {number} x - 圆心的x坐标
     * @param {number} y - 圆心的y坐标
     * @param {number} radius - 圆的半径
     * @param {number} startAngle - 起始角度
     * @param {number} endAngle - 结束角度
     * @param {string} color - 进度条的颜色
     */
    function drawCircleProgress(ctx, x, y, radius, startAngle, endAngle, color) {
        ctx.beginPath();
        ctx.arc(x, y, radius, startAngle, endAngle);
        ctx.strokeStyle = color;
        ctx.lineWidth = lineWidth * (width / 750);
        ctx.stroke();
    }

    /**
     * 在Canvas上绘制两个进度条，以直观展示两个进度值
     * @param {string} canvasId - Canvas元素的ID
     * @param {number} progressA - 第一个进度值（0-100）
     * @param {number} progressB - 第二个进度值（0-100）
     * @param {string} colorA - 第一个进度条的颜色
     * @param {string} colorB - 第二个进度条的颜色
     */
    function drawCircleProgressCanvas(canvasId, progressA, progressB, colorA, colorB) {
        // 使用示例
        let canvas = document.getElementById(canvasId);
        let ctx = canvas.getContext('2d');
        canvas.width = 128 * (width / 750);
        canvas.height = 128 * (width / 750);
        let centerX = canvas.width / 2;
        let centerY = canvas.height / 2;
        let radius = canvas.width / 2 - lineWidth / 2 * (width / 750);
        // 计算间隙
        let c = ((4 * (width / 750)) / (Math.PI * canvas.width)) * Math.PI;
        // 绘制进度条A
        let endAngleA = 1.5 * Math.PI - c;
        let startAngleA = 1.5 * Math.PI - (progressA / 100) * 2 * Math.PI + c;
        drawCircleProgress(ctx, centerX, centerY, radius, startAngleA, endAngleA, colorA);
        // 绘制进度条B
        let startAngleB = 1.5 * Math.PI + c;
        let endAngleB = 1.5 * Math.PI + (progressB / 100) * 2 * Math.PI - c;
        drawCircleProgress(ctx, centerX, centerY, radius, startAngleB, endAngleB, colorB);
    }

    drawCircleProgressCanvas('circle-canvas', '{$data.summary_comparison.list.0.score}', '{$data.summary_comparison.list.1.score}', '{$page_data.color1}', '{$page_data.color2}');
</script>
{include file="../apps/web/view/public/sensors.html" /}
</html>
